<script setup lang="ts">
import { computed } from 'vue';
import { enableStatusRecord } from '@/constants/business';
import { $t } from '@/locales';

interface Props {
  model: Api.SystemManage.TenantSearchParams;
}

interface Emits {
  (e: 'update:model', value: Api.SystemManage.TenantSearchParams): void;
  (e: 'search'): void;
  (e: 'reset'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const searchModel = computed({
  get: () => props.model,
  set: value => emit('update:model', value)
});

const statusOptions = [
  { label: $t(enableStatusRecord['1']), value: '1' },
  { label: $t(enableStatusRecord['2']), value: '2' }
];
</script>

<template>
  <ACard :bordered="false" class="search-card">
    <AForm layout="inline" :model="searchModel" @finish="$emit('search')">
      <AFormItem label="租户编码" name="tenantCode">
        <AInput v-model:value="searchModel.tenantCode" placeholder="请输入租户编码" allow-clear style="width: 200px" />
      </AFormItem>
      <AFormItem label="租户名称" name="tenantName">
        <AInput v-model:value="searchModel.tenantName" placeholder="请输入租户名称" allow-clear style="width: 200px" />
      </AFormItem>
      <AFormItem label="状态" name="status">
        <ASelect
          v-model:value="searchModel.status"
          placeholder="请选择状态"
          allow-clear
          style="width: 120px"
          :options="statusOptions"
        />
      </AFormItem>
      <AFormItem label="联系人" name="contactName">
        <AInput v-model:value="searchModel.contactName" placeholder="请输入联系人" allow-clear style="width: 150px" />
      </AFormItem>
      <AFormItem>
        <AButton type="primary" html-type="submit">
          <template #icon>
            <icon-ic-round-search class="align-sub text-icon" />
          </template>
          {{ $t('common.search') }}
        </AButton>
        <AButton class="ml-8px" @click="$emit('reset')">
          <template #icon>
            <icon-ic-round-refresh class="align-sub text-icon" />
          </template>
          {{ $t('common.reset') }}
        </AButton>
      </AFormItem>
    </AForm>
  </ACard>
</template>

<style scoped></style>
